<template>
  <div class="main">
    <Nav />
    <div class="right_route">
      <div class="top_content">
        <div class="data_item" v-for="(item, index) in top_content_data" :key="index">
          <h3>{{ item.title }}</h3>
          <ul>
            <li v-for="(twe_item, i) in item.data" :key="i">
              <h4>{{ twe_item.tag }}</h4>
              <p>{{ twe_item.num }}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="date">
        <span :class="{ active: active == (index + 1) }" v-for="(item, index) in times" :key="index"
          @click="change_active(index)">{{
            item }}</span>
      </div>
      <div class="scrollbar">
        <el-scrollbar :always="true">
          <div class="scrollbar-flex-content">
            <p v-for="(item, index) in nav_list" :key="index" class="scrollbar-demo-item"
              :class="{ active_nav: active_nav == index }" @click="change_active_nav(item, index)">
              <span>{{ item.name }}</span>
              <span class="num" v-if="index!=0">({{ item.num }})</span>
              <span class="num" v-else>{{ item.num }}</span>
            </p>
          </div>
        </el-scrollbar>
      </div>
      <div class="bottom_content">
        <div class="search_input">

          <div class="_left">
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="information_number">
                  <span>信息编号：</span>
                  <div>
                    <el-input v-model="information_number" placeholder="请输入信息编号" size="large" />
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="phone_number">
                  <span>手机号：</span>
                  <div>
                    <el-input v-model="phone_number" placeholder="请输入用户手机号" size="large" />
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="we_chat">
                  <span>微信号：</span>
                  <div>
                    <el-input v-model="we_chat" placeholder="请输入用户微信号" size="large" />
                  </div>
                </div>
              </el-col>
              <el-col :span="3">
                <div class="maintainers">
                  <span>维护人：</span>
                  <div>

                    <el-select v-model="maintainers" placeholder="请选择" size="large">
                      <el-option :label="item.nickname" :value="item.id" v-for="(item, index) in maintainers_list"
                        :key="index" />

                    </el-select>
                  </div>
                </div>
              </el-col>

              <el-col :span="3">
                <div class="_right_item">
                  <div class="region_release">
                    <span>发布地区：</span>
                    <div>
                      <el-cascader v-model="region_release" :options="region_data"
                        :props="{ value: 'code', label: 'name', children: '_child' }" placeholder="请选择地区" />
                    </div>
                  </div>
                </div>
              </el-col>

              <el-col :span="3">
                <div class="type_order">
                  <span>订单类型：</span>
                  <div>
                    <el-select v-model="type_order" placeholder="请选择订单类型" size="large">
                      <el-option label="普通信息" :value="1" />
                      <el-option label="vip信息" :value="2" />
                    </el-select>
                  </div>

                </div>
              </el-col>

              <el-col :span="3">
                <div class="submit_button">
                  <el-button type="primary" size="large" @click="inquire">查询</el-button>
                  <el-button type="warning" size="large" @click="reset">重置</el-button>
                </div>
              </el-col>

            </el-row>

          </div>

        </div>
        <div class="table_list">
          <div class="morning">
            <el-badge :value="shangwu" :max="99" class="item">
              <span :class="{ time_type: time_type == 1 }" @click="change_time_type(1)">
                上午待办
              </span>
            </el-badge>
            <el-badge :value="xiawu" :max="99" class="item">
              <span :class="{ time_type: time_type == 2 }" @click="change_time_type(2)">
                下午待办
              </span>

            </el-badge>
          </div>
          <div class="table_right">
            <div class="table">
              <Table :list="table_list" :type="active_nav"/>
            </div>
            <div class="pagination">
              <Pagination :list="page_list" :limit="limit" @change="page_change" v-if="table_list.length>0"/>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Nav from "@/components/public/nav.vue"
import Pagination from "@/components/home/task/pagination.vue"
import Table from "@/components/home/task/table.vue"
import { get_top_task, get_label_list, get_tab_data } from "@/request/api/task.ts"
import { get_user_data, get_region_data } from "@/request/api/user.ts"
import { useRoute } from 'vue-router'
const router = useRoute()
const top_content_data: any = ref('')
// 获取日期
function getDate(time: number) {
  const date = new Date();
  date.setDate(date.getDate() - time)
  let oMonth = date.getMonth() + 1,
    oDate = date.getDate();
  console.log(date, "date", oMonth, oDate);
  return {
    oMonth, oDate
  }
}
const times = [
  "今日", getDate(1).oMonth + "." + getDate(1).oDate, getDate(2).oMonth + "." + getDate(2).oDate
]
// 上午数目
let shangwu = ref(0)
// 下午数目
let xiawu = ref(0)
// 选中的日期
let active = ref(1)
// 下面的导航信息
const nav_list: any = ref([])
// 选中的导航
let active_nav = ref(0)
let table_list = ref("")
let page_list = ref("")
// 选中的标签id
let cat_1 = ref(0)
const limit = ref(7)
let params_init: any = {
  day_type: "",
  limit: limit.value,
  page: 1,
  time_type: 1,
  cat_1: 0,
  no: "",
  mobile: "",
  number: "",
  sys_user_id: "",
  area: "",
  city: "",
  address: "",
  style: ""
}
let maintainers_list: any = ref()
let region_data: any = ref([])
let information_number = ref(''),
  phone_number = ref(''),
  we_chat = ref(''),
  maintainers = ref(''),
  region_release = ref(''),
  type_order = ref('');
// 默认选中上午
let time_type = ref(1)
const change_time_type = (index: number) => {
  time_type.value = index
  params_init.time_type = index
  get_tab()
}
const change_active = (num: number) => {
  active.value = num + 1
  params_init.day_type = active.value
  params_init.page = 1
  get_tab()
  get_label(active.value)
}
const change_active_nav = (item: any, index: number) => {
  active_nav.value = index
  cat_1.value = item.id
  console.log(item, "item");
  params_init.cat_1 = item.id
  get_tab()
}
// 查询
function inquire() {
  params_init.page = 1
  params_init.no = information_number.value
  params_init.mobile = phone_number.value
  params_init.number = we_chat.value
  params_init.sys_user_id = maintainers.value
  params_init.area = region_release.value[0]
  params_init.city = region_release.value[1]
  params_init.address = region_release.value[2]
  params_init.style = type_order.value
  get_tab()
}
// 重置
function reset() {
  information_number.value = ''
  phone_number.value = ''
  we_chat.value = ''
  maintainers.value = ''
  region_release.value = ''
  type_order.value = ''
  params_init.no = information_number.value
  params_init.mobile = phone_number.value
  params_init.number = we_chat.value
  params_init.sys_user_id = maintainers.value
  params_init.area = ''
  params_init.city = ''
  params_init.address = ''
  params_init.style = ''
  params_init.page = 1
  get_tab()
}
async function get_top_data() {
  let { data } = await get_top_task()
  console.log(data, "data");
  top_content_data.value = [
    {
      title: "个人数据",
      data: [
        {
          tag: "总信息(条)",
          num: data.once_sum
        },
        {
          tag: "处理(条)",
          num: data.once_handle
        },
        {
          tag: "未处理(条)",
          num: data.once_no_handle
        },
        {
          tag: "超时处理(条)",
          num: data.once_await
        },
      ]
    },
    {
      title: "部门数据",
      data: [
        {
          tag: "总信息(条)",
          num: data.whole_sum
        },
        {
          tag: "处理(条)",
          num: data.whole_handle
        },
        {
          tag: "未处理(条)",
          num: data.whole_no_handle
        },
        {
          tag: "超时处理(条)",
          num: data.whole_await
        },
      ]
    }
  ]
}
// 维护人列表
const get_user_data_list = async () => {
  let { data } = await get_user_data()
  maintainers_list.value = data.list
}
async function get_label(str?:number) {
  let { data } = await get_label_list({ day_type:str || 0 })
  console.log(data, "标签数据");

  nav_list.value = data
  nav_list.value = [{name:"删除",num:"",id:0},...data]
}
async function get_tab() {
  const loadingInstance = ElLoading.service()
    let { data } = await get_tab_data(params_init)
    console.log("get_tab_data", data);
    table_list.value = data.list
    page_list.value = data.pageData
    if(params_init.time_type == "2"){
        await get_tab_num("1")
        xiawu.value = data.pageData.handle_count
    }else{
        await get_tab_num("2")
        shangwu.value = data.pageData.handle_count
    }
    loadingInstance.close()
}
async function get_tab_num(type:string) {
    let { data } = await get_tab_data({
        day_type: active.value,
        limit: limit.value,
        page: 1,
        time_type: type,
        cat_1: cat_1.value,
        no: "",
        mobile: "",
        number: "",
        sys_user_id: "",
        area: "",
        city: "",
        address: "",
        style: ""
    })
    if(type == '2'){
        xiawu.value = data.pageData.handle_count
    }else{
        shangwu.value = data.pageData.handle_count
    }
}
const get_region_data_list = async () => {
  let { data } = await get_region_data({ is_tree: 1 })
  console.log(data, "地区数据");
  region_data.value = data
}
// 页数发生改变
const page_change = (val: any) => {
  params_init.page = val
  get_tab()
}
onMounted(async() => {
  get_top_data()
  get_label()
  get_tab()
  get_user_data_list()
  get_region_data_list()
  console.log(router,"routerrouterrouterrouterrouter");
  
})
</script>

<style lang="scss" scoped>
.main {
  display: flex;


  .right_route {
    padding: 10px 20px 0 20px;
    flex: 1;
    box-sizing: border-box;
    background: rgba(#FFF, 1);
    width: calc(100vw - 200px);

    .top_content {
      display: flex;
      justify-content: space-evenly;

      .data_item {
        width: 50%;
        height: 120px;
        border-right: 2px solid #FAFAFA;
        // border: 1px solid rgba(233, 233, 233, 1);

        h3 {
          height: 36px;
          @include font(#333, 16, 36);
          font-weight: 650;
          padding-left: 20px;
          // background-color: rgba(249, 249, 249, 1);
          border-bottom: 1px solid rgba(233, 233, 233, 1);
        }

        ul {
          display: flex;
          height: 84px;
          align-items: center;
          justify-content: space-evenly;

          li {
            h4 {
              @include font(#999999, 14, 25);
              color: #606266;
              font-size: 13px;
            }

            p {
              font-family: 'Montserrat-Bold', 'Montserrat Bold', 'Montserrat', sans-serif;
              // font-weight: 700;
              font-size: 20px;
              padding: 0 4px;
              @include font(#666, 18, 25);
              margin-top: 5px;
              text-align: center;
            }
          }
        }
      }
    }

    .bottom_content {
      margin-top: 20px;
      border-top: 1px solid rgba(215, 215, 215, 1);
      // border-bottom: 1px solid rgba(215, 215, 215, 1);
    }

    .date {
      display: flex;
      margin: 15px 0;

      span {
        display: inline-block;
        flex: 1;
        text-align: center;
        @include font(#333, 17, 40);
        background-color: #D8D8D8;
        cursor: pointer;
        height: 40px;
      }

      .active {
        background: rgba(64, 158, 255, 1);
        color: #FFF;
      }
    }

    .scrollbar {
      width: calc(100vw - 250px);
    }

    .search_input {
      // display: flex;
      // flex-wrap: wrap;

      .information_number,
      .phone_number,
      .we_chat,
      .maintainers,
      .region_release,
      .type_order {
        display: flex;
        // width: 334px;
        align-items: center;
        margin-top: 15px;
        // margin-right: 20px;

        span {
          display: inline-block;
          width: 70px;
          @include font(rgba(0, 0, 0, 0.8470588235294118), 14, 22);
        }

        >div {
          flex: 1;
        }
      }

      .submit_button {
        display: flex;
        align-items: center;
        margin-top: 15px;
        // justify-content: right;
        // margin-left: 410px;
      }
    }

    .table_list {
      margin-top: 20px;
      display: flex;

      .morning {
        width: 56px;
        height: 390px;

        span {
          display: flex;
          font-weight: 650;
          font-style: normal;
          font-size: 20px;
          color: #333;
          background: rgb(242, 242, 242);
          height: 200px;
          justify-content: center;
          align-items: center;
          padding: 0 10px;
          box-sizing: border-box;
          text-align: center;
          cursor: pointer;
        }

        .time_type {
          background: rgba(64, 158, 255, 1);
          color: #FFF;
        }
      }

      .table_right {
        width: calc(100% - 56px);
      }

      .pagination {
        margin: 20px 0;
        display: flex;
        justify-content: center;
      }
    }
  }
}

.scrollbar-flex-content {
  display: flex;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 126px;
  height: 50px;
  text-align: center;
  border-radius: 4px;
  // background: var(--el-color-danger-light-9);
  @include font(#333, 13, 50);
  cursor: pointer;

  .num {
    margin-left: 5px;
  }

  &.active_nav {
    color: rgb(64, 158, 255);
  }
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-cascader) {
  width: 100%;
}

:deep(.el-input--large) {
  height: 32px;
}

:deep(.el-button) {
  height: 32px;
}
:deep(.el-badge__content.is-fixed){
  z-index: 8;
  top: 170px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
</style>